<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="<%=basePath%>">
<title>代理商</title>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/main.css">
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/js/main.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.4.5/angular.min.js"></script>
<script type="text/javascript">
	var image = '';
	function selectImage(file) {
		if (!file.files || !file.files[0]) {
			return;
		}
		var reader = new FileReader();
		reader.onload = function(evt) {
			document.getElementById('image').src = evt.target.result;
			image = evt.target.result;
		};
		reader.readAsDataURL(file.files[0]);
	}
	function selectImage2(file) {
		if (!file.files || !file.files[0]) {
			return;
		}
		var reader = new FileReader();
		reader.onload = function(evt) {
			document.getElementById('image2').src = evt.target.result;
			image = evt.target.result;
		};
		reader.readAsDataURL(file.files[0]);
	}
	function selectImage3(file) { //显示图片
		if (!file.files || !file.files[0]) {
			return;
		}
		var reader = new FileReader();
		reader.onload = function(evt) {
			document.getElementById('image3').src = evt.target.result;
			image = evt.target.result;
		};
		reader.readAsDataURL(file.files[0]);
	}
	function sureCard() {
		var card = /^\d{1,20}$/;
		var productCard = $("#productCard").val();
		if (!card.test(productCard)) {
			$("#sureCard").text("请输入1到20位数字").css("color", "red")
			$("#productCard").val("")
		} else {
			$("#sureCard").text("")
		}
	}
	function surePrice1() {
		var price = /^(0|[1-9][0-9]{0,5})(\.[0-9]{1,2})?$/;
		var productPrice = $("#productPrice").val();
		if (!price.test(productPrice)) {
			$("#surePrice").text("请输入正确的价格，小数点以后不能超过两位").css("color", "red");
			$("#productPrice").val("")
		} else {
			$("#surePrice").text("")
		}
	}

	function submitProduct() {
		if ($("#productCard").val()) {
			if ($("#productPrice").val()) {
				if ($("#productName").val()) {
					if ($("#productFile").val() && $("#productFile2").val()) {
						if ($("#selectType2").find("option").val()) {
							/********************用于判断图片大小以及图片名称是否合法******************/
							var aarr = document.getElementsByTagName("input");
							var barr = [];
							var picreg = /^[A-Za-z0-9\._]{1,100}$/; //图片名称正则
							var flag1 = false; //用于判断图片大小
							var flag2 = false; //用于判断图片名称
							for (var i = 0; i < aarr.length; i++) {
								if (aarr[i].type == "file") {
									barr.push(aarr[i])
								}
							}
							for (var z = 0; z < barr.length; z++) {
								if (barr[z].files[0].size > 204800) { //判断图片大小是否大于200kb
									flag1 = true;
								}
								if (!picreg.test(barr[z].files[0].name)) { //判断图片大小是否大于200kb
									flag2 = true;
								}
							}
							if (flag1) {
								alert("上传图片不得超过200kb每张");
								return;
							}
							if (flag2) {
								alert("图片名称只能由字母与数字组成");
								return;
							}
							/******************用于判断图片大小以及图片名称是否合法****************/
							$.ajax({
								url : urls + "productaAction/inputProductFileUpload",
								type : 'POST',
								cache : false,
								data : new FormData($('#uploadForm')[0]),
								processData : false,
								contentType : false
							}).done(function(res) {
								console.log(res)
								if (res == "false") {
									alert("提交失败")
								} else if (res == 250) {
									alert("商品条码已存在")
								} else {
									alert("提交成功")
									$("#uploadForm").find("input").val("");
									$("#productDetail").val("");
									$("#image").attr("src", "");
									$("#image2").attr("src", "")
									$("#image3").attr("src", "")
								}
							}).fail(function(res) {
								console.log(res)
								alert("服务器异常")
							});
						} else {
							alert("请输入商品分类")
						}
					} else {
						alert("请添加略缩图以及banner图片")
					}
				} else {
					alert("请输入商品名称")
				}
			} else {
				alert("请输入商品价格")
			}
		} else {
			alert("请输入商品条形码")
		}
	}
</script>

<style>
.main_div {
	height: 560px;
	min-width: 1000px
}

form span {
	float: left;
	width: 90px;
	height: 52px;
	line-height: 52px;
	padding-left: 20px;
	background-color: white;
}
</style>
</head>
<body>
	<%@ include file="header.jsp"%>
	<%@ include file="left.jsp"%>
	<div id="index"
		style="position: absolute;left: 180px;top: 80px;bottom: 0;right: 0;">

		<section id="main">

			<div class="scrollbar1-1" id="style1-1">
				<div class="main_div">
					<div class="main_title">
						<span>录入商品</span>
					</div>
					<form class="form-horizontal" id="uploadForm"
						style="margin-top: 30px" enctype="multipart/form-data">
						<div class="form-group">
							<label for="inputEmail1" class="col-xs-1 control-label">商品分类</label>
							<div class="col-xs-2">
								<select id="selectType1" class="col-xs-12"
									onclick="change1(this.value,'#selectType2');">

								</select>
							</div>
							<div class="col-xs-2">
								<select id="selectType2" class="col-xs-12" name="goodsType">
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="col-xs-1 control-label">商品名称</label>
							<div class="col-xs-3">
								<input type="text" style="display: none;"> <input
									type="text" name="productName" class="form-control"
									id="productName" placeholder="商品名称">
							</div>
							<label maxlength="50" class="col-xs-2 control-label"
								style="text-align:left;color:#ccc;">请输入正确的商品名称</label>
						</div>
						<div class="form-group">
							<label class="col-xs-1 control-label">商品条码</label>
							<div class="col-xs-3">
								<input type="text" onblur="sureCard();" name="barCode"
									class="form-control" id="productCard" placeholder="商品条码">
							</div>
							<label id="sureCard" class="col-xs-2 control-label"
								style="text-align:left;color:#ccc">请输入正确并且唯一的商品条码</label>
						</div>
						<div class="form-group">
							<label class="col-xs-1 control-label">商品价格</label>
							<div class="col-xs-3">
								<input type="text" name="referenceValue" onblur="surePrice1();"
									class="form-control" id="productPrice" placeholder="商品价格">
							</div>
							<label id="surePrice" class="col-xs-2 control-label"
								style="text-align:left;color:#ccc">请输入正确的商品价格</label>
						</div>
						<div class="form-group">
							<label class="col-xs-1 control-label">略缩图:</label>
							<div class="col-xs-3">
								<input type="file" id="productFile" name="file"
									onchange="selectImage(this);" /> <img id="image"
									style="width:105px;height:105px" src="" />
							</div>
							<label class="col-xs-2 control-label"
								style="text-align: left;color: #ff6c29">*必须上传略缩图（建议大小为210*210px）</label>
						</div>
						<div class="form-group">
							<label class="col-xs-1 control-label">商品图片:</label>
							<div class="col-xs-3">
								<input type="file" id="productFile2" name="bigFile"
									onchange="selectImage2(this);" /> <img id="image2"
									style="width:375px;height:375px" src="" />
							</div>
							<label class="col-xs-4 control-label"
								style="text-align: left;color: #ff6c29">*必须上传略缩图（建议大小为750*750像素）</label>
						</div>
						<div class="form-group">
							<label class="col-xs-1 control-label">商品详情：</label>
							<div class="col-xs-3">
								<input type="file" id="detailFile" name="detailFile"
									onchange="selectImage3(this);"> <img id="image3"
									style="width:375px;" src="" />
							</div>
							<label class="col-xs-5 control-label"
								style="text-align: left;color: #ff6c29">*必须上传商品详情图片（建议宽度为750像素）</label>
						</div>

						<div class="form-group">
							<label class="col-xs-1 control-label">商品介绍</label>
							<div class="col-xs-4">
								<textarea class="col-xs-12" rows="5" name="productDetail"
									id="productDetail"></textarea>
							</div>
						</div>
						<div class="form-group">
							<div class="col-xs-4 col-xs-offset-2">
								<button class="col-xs-4 btn btn-primary" type="button"
									onclick="submitProduct()">提交审核</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</section>
	</div>
	<script>
	</script>
</body>
</html>